<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view
    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
    class="index_container bg-white overflow-hidden"
  >
    <wd-swiper
      v-model:current="current"
      :list="swiperList"
      autoplay
      @change="onChange"
      @click="handleClick"
    ></wd-swiper>

    <view class="m-3 bg-white rounded-md">
      <view class="flex justify-between items-center p-2 border-b-solid border-1 border-#F0F0F0">
        <view>
          <text class="text-#7A8089">欢迎您!</text>
          <text class="ml-2 text-#24297A">客户编号 会员等级 荣誉级别</text>
        </view>
        <wd-button plain size="small">退出</wd-button>
      </view>
      <view class="grid grid-cols-2">
        <view v-for="item in moneyList" :key="item.icon" class="flex flex-col p-5">
          <view :class="['mb-1', 'iconfont', item.icon]">{{ item.typeName }}</view>
          <wd-count-to
            :autoplay="false"
            :decimals="2"
            :duration="2000"
            :endVal="21286.321"
            :fontSize="20"
            :startVal="0"
            color="rgb(255, 184, 0)"
            prefix="￥"
            suffix="元"
          ></wd-count-to>
        </view>
      </view>
    </view>

    <view class="m-3 px-5 pb-5 lg:px-8 bg-white rounded-md grid grid-cols-3">
      <view v-for="(name, index) in diagramList" :key="name" class="center flex-col pt-5">
        <img :src="`/static/images/index/iconapp${index + 1}.png`" class="h-13 w-13 object-cover" />
        <text>{{ name }}</text>
      </view>
    </view>

    <view class="m-3 px-5 lg:px-8 bg-white rounded-md">
      <view
        v-for="(str, index) in list"
        :key="index"
        class="list p-2"
        @click="handleListClick(str)"
      >
        {{ str }}
      </view>
    </view>

    <view class="text-center mt-1">
      当前平台是：
      <text class="text-green-500">{{ PLATFORM.platform }}</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import PLATFORM from '@/utils/platform'

defineOptions({
  name: 'Home',
  options: {
    styleIsolation: 'shared',
    // 将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签
    // virtualHost: true,
  },
})
const current = ref<number>(0)
const swiperList = ref([
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
])

function handleClick(e) {
  // console.log(e)
}

function onChange(e) {
  // console.log(e)
}

const moneyList = ref([
  { icon: 'icon-shuangyuanquan', typeName: '奖金币' },
  { icon: 'icon-qianbi', typeName: '电子币' },
  { icon: 'icon-faxingxunibi', typeName: '购物币' },
  { icon: 'icon-yun', typeName: '积分' },
])

const diagramList = ref([
  '直推图',
  '系谱图',
  '算力',
  '账户充值',
  '收益',
  '账户转账',
  '会员体现',
  '邀请好友',
  '安全退出',
])

const list = ref<Array<string>>(['新闻', '通知', '学习', '政策'])
const handleListClick = (str: string) => {
  console.log(str)
}

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const author = ref('菲鸽')
// 测试 uni API 自动引入
onLoad(() => {
  console.log('项目作者:', author.value)
})
</script>

<style scoped lang="scss">
:deep(.wd-swiper__track) {
  border-radius: 0 !important;
}

.index_container {
  background: url('@/static/images/index_bg.png') no-repeat center center;
  background-size: cover;

  .list {
  }

  .list + .list {
    border-top: 1px solid #e5e5e5;
  }
}
</style>
